<template>
  <div class="content">
    <div class="green-circle">
      <div class="pink-circle">
        <img class="bottom-circle" src="@/assets/imgs3d/1web.webp" alt="" />
      </div>
    </div>
    <div class="swiper-box" id="swiperBox">
      <div
        v-for="(item, index) in lists"
        :key="'img-' + index"
        class="loop-item"
        :style="{
          transform: `translate(-50%, -50%) rotate(${
            (360 / lists.length) * index
          }deg) translateY(-35vh) rotateX(90deg)`
        }"
      >
        <img class="alarm-img" :src="item.src" />
      </div>
    </div>
  </div>
</template>

<script setup>
  const lists = ref([])
  const props = defineProps({
    list: {
      type: Array,
      default: () => [],
      required: true
    }
  })
  onBeforeMount(() => {
    lists.value = props.list
    console.log('lists', lists.value)
  })
</script>

<style lang="scss" scoped>
  // body {
  //   width: 100%;
  //   height: 500px;
  // }

  .content {
    width: 100%;
    height: 700px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .green-circle {
      margin-top: 126px;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 800px;
      height: 800px;
      transform-style: preserve-3d;
      transform: rotateX(60deg) rotate(18deg);
      background-color: #aee6b4;
      box-shadow: 19px 48px 27px #c5e3dd;
      border-radius: 50%;

      .pink-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 300px;
        height: 300px;
        background-color: rgba(255, 9, 9, 0.6);
        border-radius: 50%;
        box-shadow: 2px 2px 30px #c82d2d;

        .bottom-circle {
          width: 300px;
          object-fit: contain;
        }
      }
    }

    .swiper-box {
      position: relative;
      z-index: 200;
      width: 100%;
      transform-style: preserve-3d;
      animation: three-dimensions-circle 10s linear infinite;
      // animation: none;

      .loop-item {
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        cursor: pointer;
        text-align: center;

        // background-color: aquamarine;
        .loop-name {
          font-size: 14px;
          color: #ffffff;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        img,
        .alarm-img {
          margin-top: 4px;
          width: 150px;
          height: 17vh;
        }
      }
    }
  }

  @keyframes three-dimensions-circle {
    0% {
      transform: rotateX(-108deg) rotate(0);
    }

    100% {
      // transform: rotateX(-108deg) rotate(0);
      transform: rotateX(-108deg) rotate(-360deg);
    }
  }
</style>
